<template>
    <div>
        <el-alert type="success"
                  title="顶部容器"
                  :closable="false">
            <p>- 样式：panel _body page-top。</p>
            <p>- 内容放在 panel 中的 &lt;el-form&gt; 中。</p>
        </el-alert>

        <el-divider content-position="left">搜索条件</el-divider>
        <div class="panel _body page-top">
            <el-form label-width="6em">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="条件1">
                            <el-input v-model="oFilterForm.q1"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="条件2">
                            <el-select v-model="oFilterForm.q2"
                                       :clearable="true"
                                       placeholder="请选择">
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="条件3（长文本，设置宽）"
                                      label-width="200px">
                            <el-input v-model="oFilterForm.q3"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="条件4">
                            <el-input v-model="oFilterForm.q4"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="日期">
                            <div class="com-datebar">
                                <el-date-picker></el-date-picker>
                                <span class="com-datebar-span">至</span>
                                <el-date-picker></el-date-picker>
                            </div>
                        </el-form-item>
                    </el-col>

                    <!-- 少一项条件，补足列宽 -->
                    <!-- 搜索按钮组-->
                    <el-col :span="12"
                            class="page-top-btns _right">
                        <el-form-item label-width="0">
                            <el-button icon="el-icon-search"
                                       type="primary">搜索</el-button>
                            <el-button icon="el-icon-refresh-right">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-divider content-position="left">可展开的搜索条件</el-divider>
        <div class="panel _body page-top">
            <el-form label-width="6em">
                <el-row v-if="bFilterOpened"
                        key="filterHidden">
                    <el-col :span="6">
                        <el-form-item label="隐藏条件1">
                            <el-input v-model="oFilterForm.hq1"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="隐藏条件2">
                            <el-input v-model="oFilterForm.hq2"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="隐藏条件3">
                            <el-input v-model="oFilterForm.hq3"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="条件1">
                            <el-input v-model="oFilterForm.q1"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="条件2">
                            <el-select v-model="oFilterForm.q2"
                                       :clearable="true"
                                       placeholder="请选择">
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="条件3（长文本，设置宽）"
                                      label-width="200px">
                            <el-input v-model="oFilterForm.q3"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6"
                            class="page-top-btns _right">
                        <el-form-item label-width="0">
                            <el-button icon="el-icon-search"
                                       type="primary">搜索</el-button>
                            <el-button icon="el-icon-refresh-right">重置</el-button>
                            <!-- 已展开显示 up，已收起显示 down -->
                            <el-button :icon="bFilterOpened?'el-icon-arrow-up':'el-icon-arrow-down'"
                                       @click="fFilterToggleClick"></el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-divider content-position="left">按钮</el-divider>
        <el-alert type="info"
                  :closable="false">
            <p>按钮列公共样式：&lt;el-col class="page-top-btns"&gt;。</p>
            <p>按钮靠右：&lt;el-col class="page-top-btns _right"&gt;。</p>
            <p>按钮项设置不显示文字 &lt;el-form-item label-width="0"&gt;。</p>
            <p>上传按钮：&lt;comp-upload class"com-button _upload"&gt;。</p>
        </el-alert>
        <div class="panel _body page-top">
            <el-form label-width="6em">
                <el-row>
                    <!-- 靠左的按钮 -->
                    <el-col :span="18"
                            class="page-top-btns">
                        <el-form-item label-width="0">
                            <el-button icon="el-icon-circle-plus-outline"
                                       type="success">新增</el-button>
                            <comp-upload type=".xlsx,.XLSX"
                                         :multiple="false"
                                         class="com-button _upload">
                                <el-button type="primary">上传</el-button>
                            </comp-upload>
                            <el-button icon="el-icon-edit-outline"
                                       type="warning">导出</el-button>
                            <!-- 已展开显示 up，已收起显示 down -->
                            <!-- 文字和 i 标签之间不空格 -->
                            <el-dropdown class="com-button"
                                         trigger="click"
                                         placement="bottom-start"
                                         @visible-change="fVisibleChange">
                                <el-button type="primary">
                                    下拉按钮<i class="el-icon--right"
                                       :class="bOpened?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                                </el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="0">操作0</el-dropdown-item>
                                    <el-dropdown-item command="1">操作1</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </el-form-item>
                    </el-col>

                    <!-- 其他按钮 -->
                    <el-col :span="6"
                            class="page-top-btns _right">
                        <el-form-item label-width="0">
                            <el-button>返回</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-divider content-position="left">标题+按钮</el-divider>
        <div class="panel _body page-top">
            <el-form label-width="6em">
                <el-row>
                    <el-col :span="18">
                        <el-form-item label-width="0">
                            <div class="page-top-title">页面标题页面标题页面标题页面标题页面标题页面标题页面标题页面标题页面标题页面标题</div>
                        </el-form-item>
                    </el-col>

                    <!-- 其他按钮 -->
                    <el-col :span="6"
                            class="page-top-btns _right">
                        <el-form-item label-width="0">
                            <el-button>返回</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-divider content-position="left">搜索条件+功能按钮</el-divider>
        <div class="panel _body page-top">
            <el-form label-width="6em">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="条件1">
                            <el-input v-model="oFilterForm.q1"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="条件2">
                            <el-input v-model="oFilterForm.q2"></el-input>
                        </el-form-item>
                    </el-col>

                    <!-- 其他按钮 -->
                    <el-col :span="12"
                            class="page-top-btns _right">
                        <el-form-item label-width="0">
                            <!-- 搜索按钮组-->
                            <el-button icon="el-icon-search"
                                       type="primary">搜索</el-button>
                            <el-button icon="el-icon-refresh-right">重置</el-button>
                            <el-button icon="el-icon-circle-plus-outline"
                                       type="success">新增</el-button>
                            <el-button plain
                                       type="danger">批量删除</el-button>
                            <el-button icon="el-icon-edit-outline"
                                       type="warning">导出</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
    import CompUpload from '@/components/project/upload.vue';

    export default {
        components: {
            CompUpload
        },
        data() {
            return {
                //-- 下拉按钮 --
                bOpened: false,//下拉框是否显示
                //-- 过滤条件 --
                bFilterOpened: false,//是否展开全部过滤条件
                oFilterForm: {},
            }
        },
        methods: {
            //下拉按钮
            fVisibleChange(bOpened) {
                this.bOpened = bOpened;
            },
            //过滤条件
            fFilterToggleClick() {
                this.bFilterOpened = !this.bFilterOpened;
            }
        }
    }
</script>
